<template>
  <Modal   :width="800" v-model="model">
    <p slot="header" >
      <Icon type="ios-information-circle"></Icon>
      <span>{{ruleForm.id ? '编辑分类' : '新增分类'}}</span>
    </p>
    <Form :model="ruleForm" :label-width="100" ref="ruleForm" :rules="rules">
      <FormItem label="上级分类" prop="categoryValue">
        <treeselect
          v-model="ruleForm.categoryValue"
          :max-height="200"
          :options="typeList"
          :default-expand-level="3"
          @select="onTreeSelect"
          placeholder="请选择上级分类"/>
      </FormItem>
      <FormItem label="分类名称" prop="categoryName">
        <Input v-model="ruleForm.categoryName" placeholder="请输入分类名称"/>
      </FormItem>
      <!-- <FormItem label="是否启用">
         <Checkbox v-model="ruleForm.isEnabled" label name="type"></Checkbox>
      </FormItem> -->
    </Form>
    <div slot="footer">
      <Button  size="large" type="text"  @click="onCancel">取消</Button>
      <Button type="primary" size="large"   @click="onDone">确认</Button>
    </div>
  </Modal>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
export default {
  components: {
    Treeselect
  },
  props: {
    model: false,
    typeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('分类名称不能为空'))
      } else if (value.length > 50) {
        callback(new Error('分类名称最多50个字'))
      } else {
        callback()
      }
    }
    return {
      id: '',
      ruleForm: {
        id: '',
        categoryValue: null,
        categoryName: '',
        isEnabled: true
      },
      rules: {
        categoryValue: [
          { required: true, message: '请选择上级分类', trigger: 'change' }
        ],
        categoryName: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ]
      },
      loading: false,
      height: ''
    }
  },
  methods: {
    open(row) {
      this.model = true
      if (row && row.id) {
        this.ruleForm.id = row.id
        this.ruleForm.categoryValue = row.parentId
        this.ruleForm.categoryName = row.name
        // this.ruleForm.isEnabled = row.isEnabled
      } else {
        this.reset()
        this.$refs['ruleForm'].resetFields()
      }
    },
    reset() {
      this.ruleForm.id = ''
      this.ruleForm.categoryValue = ''
      this.ruleForm.categoryName = ''
      this.ruleForm.isEnabled = true
    },
    onCancel() {
      this.model = false
      this.reset()
      this.$refs['ruleForm'].resetFields()
    },
    onDone() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let param = {
            name: this.ruleForm.categoryName,
            isEnabled: this.ruleForm.isEnabled,
            parentId: this.ruleForm.categoryValue
          }
          let url = '/product/supplier_category/add'
          if (this.ruleForm.id) { // 编辑
            url = '/product/supplier_category/update'
            param.id = this.ruleForm.id
          }
          this.$jsonPost(url, param).then(data => {
            this.$Notice.success({
              title: (this.ruleForm.id ? '编辑' : '新增') + '成功'
            })
            this.$emit('complete')
            this.model = false
          }).catch((res) => {
          })
        }
      })
    }
  }
}
</script>

